<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<view class="u-h-88">
			
		</view>
		<!-- #endif -->
		<view class="u-rela">
			<u-image :src="userinfo.bg_img" mode="aspectFill" width="750rpx" height='467rpx'>
			</u-image>
			<view class="u-abso u-t-0 u-w-710 u-auto u-flex u-p-20" >
				<view class="" @click="backs">
					<u-image src="https://www.sqkjkj.vip/wxImg/clear/img6.png" mode="aspectFill" width="50rpx" height='50rpx'>
					</u-image>
				</view>
				<view class="u-w-600">
					<u-notice-bar type="" bg-color="" font-size="30" speed="80" mode="horizontal" :list="noticeList"></u-notice-bar>
				</view>
			</view>
			<view class="">
				<view class="bg_FFFFFF u-flex u-p-20">
					<u-image :src="userinfo.logo" mode="aspectFill" width="170rpx" height='170rpx'>
					</u-image>
					<view class=" u-h-170 u-w-540 ">
						<view class="bg_FFFFFF u-flex u-font-30 u-weight u-p-l-10 u-p-t-20">
							<view class="" v-if="userinfo.is_bond==1">
								<u-image src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/img2.png" mode="aspectFill" width="28rpx"
									height='28rpx'></u-image>
							</view>

							<view class=" u-m-l-20">{{userinfo.name}}</view>
						</view>
						<view class="bg_FFFFFF u-p-t-20 u-p-l-10 u-flex u-row-between"
							@click.stop="$u.route('/pages/qualifications/qualifications?num='+userinfo.id)">
							<view class="u-font-26 cl_454545FF">
								查看店铺资质
								<u-icon name='arrow-right'></u-icon>
							</view>
							<view class="u-w-140 u-m-r-20 u-h-56 u-font-28 u-text-center u-l-h-56 cl_FFF u-b-r-40"
								style="background-color: #ff7a68FF;" @click.stop="lick">{{Text1}}</view>
						</view>
					</view>
				</view>
				<view class="u-m-t-20">
					<view class="u-p-10 u-m-t-20 u-flex">
						<view @click="$com.makePhoneCall(userinfo.mobile)" class="u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/clear/img2.png" mode="aspectFill" width="28rpx" height='28rpx'>
							</u-image>
							<view  class="u-m-l-10 u-font-26"><text class="cl_898989FF">电话:</text>{{userinfo.mobile}}
							</view>
						</view>

						<view @click="$com.setClipboardData(userinfo.wechat)" class="u-flex u-m-l-20">
							<u-image src="https://www.sqkjkj.vip/wxImg/clear/wx.png" mode="aspectFill" width="28rpx" height='28rpx'>
							</u-image>
							<view   class="u-m-l-10 u-font-26 u-m-r-20"><text
									class="cl_898989FF">微信:</text>{{userinfo.wechat}}
							</view>
							<u-image src="https://www.sqkjkj.vip/wxImg/clear/img3.png" mode="aspectFill" width="28rpx" height='28rpx'>
							</u-image>
						</view>
					</view>
					<view @click="openLocation" class="u-flex u-m-t-10 u-p-10">
						<u-image src="https://www.sqkjkj.vip/wxImg/clear/img4.png" mode="aspectFill" width="28rpx" height='28rpx'></u-image>
						<view class="u-m-l-10 u-font-26 u-m-r-20">
							<text class="cl_898989FF">地址:</text>{{userinfo.area+userinfo.address}}
							<u-icon class="u-m-l-10" name="map-fill" color="#13b658" size="30"></u-icon>	
						</view>
					</view>
					<view class="u-p-20">
						<view class="u-flex">
							<view class="u-p-r-30 u-font-26" style="border-right: 1rpx solid #cccccc;color: #898989FF;">
								<u-icon name='map'></u-icon>
								<text>距您{{userinfo.distance || 0}}km</text>
							</view>
							<view class="u-font-26 u-p-l-20">共<text
									style="color:#FF5502FF ;">{{userinfo.sales}}</text>销量</view>
									<view class="u-font-26 u-p-l-20">共<text
											style="color:#FF5502FF ;">{{userinfo.goods_num}}</text>个商品</view>
						</view>
						<view class="u-font-28 u-flex u-row-between u-p-t-10">
							<view class=""> {{userinfo.describe}}</view>
						</view>
					</view>
					<view class="u-flex u-row-between u-p-10 u-m-20">
						<view @click="choes_card(1)" class="u-weight" :class='num==1?"cl_FC3533FF":""'>普通商品</view>
						<view @click="choes_card(2)" class="u-weight" :class='num==2?"cl_FC3533FF":""'>积分商品</view>
						<view @click="choes_card(3)" class="u-weight" :class='num==3?"cl_FC3533FF":""'>分类</view>
						<view @click="choes_card(4)" class="u-weight" :class='num==4?"cl_FC3533FF":""'>优惠券</view>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class=" u-p-20 ">
				<view class="" v-if="num==1 || num==2">
					<u-search bg-color="#FFFFFF" :show-action="true" shape="square" placeholder="请输入搜索内容" v-model="params.search" @search="searchBlur"></u-search>
				</view>
				<view class="" v-if="num==1">
					<u-row>
						<u-col span='6' v-for="(item,index) in good_list" :key="index">
							<view class="u-w-340 bg_FFFFFF u-m-r-14  u-m-t-20 u-b-r-16"
								@click="$u.route('/pages/home/paymassage?num='+item.spu)">
								<u-image :src="item.imgs[0]" mode="aspectFill" width="342rpx" height='306rpx'>
								</u-image>
								<view class="u-p-20">
									<view class="cl_1C1C1CFF u-weight text-cut">{{item.name}}</view>
									<view class="u-flex u-row-between u-p-t-20">
										<view class="u-flex">
											<!-- <u-image src="https://www.sqkjkj.vip/wxImg/common/home/img10.png" mode="aspectFill" width="68rpx"
												height='30rpx'></u-image> -->
											<view class="cl_FC3533FF u-font-30 u-weight">￥{{item.price}}</view>
										</view>
										<view class="cl_848484FF u-font-24">已售{{item.sales}}</view>

									</view>
									<view class="u-flex  u-p-t-20">
										<u-image src="https://www.sqkjkj.vip/wxImg/common/img/js.jpg" mode="aspectFill" width="44rpx"
											height='44rpx'></u-image>
										<view class="cl_848484FF u-font-20">{{item.shopname}}</view>
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
				<!-- 积分商品 -->
				<view class=" u-p-20 " v-if="num==2">
					<view class="u-p-30 u-m-t-20 u-flex bg_FFFFFF u-b-r-12" v-for="(item,indexs) in good_list"
						:key="indexs" style="border-bottom: 1rpx solid #F1F1F1FF;"
						@click="$u.route('/pages/home/shopmassage?num='+item.spu)">
						<view class=" u-p-20" style="background-color:#EFEFEFFF ;">
							<u-image :src="item.imgs[0]" mode="aspectFill" width="212rpx" height='212rpx'></u-image>
						</view>

						<view class=" u-h-212 u-w-600 u-p-20  ">
							<view class=" u-weight">{{item.name}}</view>
							<view class=" u-flex u-p-t-20">
								<view class="u-font-40" style="color: #FF5502FF;">{{item.to_pay_price}}+</view>
								<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/money.png" mode="aspectFill" width="32rpx"
									height='32rpx'></u-image>
								<view class="u-font-40" style="color: #FF5502FF;">{{item.to_pay_score}}</view>
							</view>
							<view class="u-flex u-row-between u-p-t-10">
								<view class=" u-font-20">
									已兑换<text style="color:#FC3533FF ;">{{item.sales}}</text>件
								</view>
								<view class="u-w-154 u-h-62 u-l-h-62 u-text-center u-font-20 u-b-r-16"
									style="background-color:#FF5502FF;color: #FFFFFF">立即兑换</view>
							</view>
						</view>

					</view>
				</view>
				
				<view v-if="num==1 || num==2" class="u-p-20">
					<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30"
						margin-bottom="30" />
				</view>
				<!-- 分类 -->
				<view class="u-flex u-col-top" v-if="num==3" >
					<view class="bg_FFFFFF u-w-200 cl_898989FF" style="float: left;">
						<view class="u-p-20 " @click="choes_class(item.id)"
							:class='asd==item.id?"u-weight cl_FC3533FF":""' v-for="(item,index2) in class_name"
							:key="index2">{{item.title}}</view>
					</view>
					<view class="u-w-500 u-flex u-flex-wrap">
						<view class="u-flex-col u-col-center u-m-t-50" v-if="class_good_lists==0">
							<u-image src="https://www.sqkjkj.vip/wxImg/1.png" width='100rpx' height='100rpx'></u-image>
							<view class="cl_999 u-font-30 u-m-t-30">该分类下暂无商品</view>
						</view>
						<view class="bg_F5F5F5FF u-w-220 u-p-20" v-for="(item,index3) in class_good_lists" :key="index3">
							<view class="u-m-10 u-w-200 u-flex-col u-col-center" @click="$u.route('/pages/home/paymassage?num='+item.spu)">
								<view class="bg_FFFFFF u-p-20">
									<u-image :src="item.imgs[0]" mode="aspectFill" width="106rpx"
										height='148rpx'></u-image>
								</view>
								<view class="u-w-200 u-m-t-20 text-cut">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="num==4">
					<view class="u-p-20 u-weight">本店优惠券</view>
					<view class="u-flex-col u-col-center u-m-t-50" v-if="shop_card.length==0">
						<u-image src="https://www.sqkjkj.vip/wxImg/1.png" width='100rpx' height='100rpx'></u-image>
						<view class="cl_999 u-font-30 u-m-t-30">暂无可用优惠券</view>
					</view>
					<view class="bg_FFFFFF u-p-20 u-rela" v-else v-for="(item,index) in shop_card" :key="item.id"
						>
						<u-image src='https://www.sqkjkj.vip/wxImg/clear/img8.png' width='651rpx' height='147rpx'></u-image>
						<view class="u-abso u-t-30 u-w-652 u-rela u-flex u-row-between u-p-20 ">
							<view class="u-flex u-w-552">
								<view class="u-font-55 cl_FFF u-weight">{{item.type==3?`${item.discount}折`:`￥${item.use_money}`}}</view>
								<view class="u-m-l-20 cl_FFF">
									<view class="u-weight u-font-28">{{item.type==1?'无门槛':item.type==2?'满减优惠券':item.type==3?'折扣优惠券':'消费券'}} </view>
									<view class=" u-font-24 u-p-t-5">{{item.type==1?'无门槛使用':`满${item.limit_money}元可用`}}</view>
								</view>
							</view>
							<view @click="save_card(item)" class="u-w-70 u-font-30 u-weight u-font-20 cl_FF4B3CFF" >立即领取</view>
						</view>

					</view>
					<view class="u-p-20 u-weight">推荐优惠券</view>
					<view class="u-flex-col u-col-center u-m-t-50" v-if="lick_shop_cords.length==0">
						<u-image src="https://www.sqkjkj.vip/wxImg/1.png" width='100rpx' height='100rpx'></u-image>
						<view class="cl_999 u-font-30 u-m-t-30">暂无推荐优惠券</view>
					</view>
					<view class="bg_FFFFFF u-m-t-20 u-p-20" v-for="(item,index4) in lick_shop_cords" :key="index4">
						<view class="u-p-20 u-flex u-row-between">
							<view class="u-flex">
								<u-image src="https://www.sqkjkj.vip/wxImg/common/img/js.jpg" mode="aspectFill" width="93rpx" height='93rpx'
									border-redius='16'>
								</u-image>
								<view class="">
									<view class="u-flex">
										<u-image v-if="item.shop_info.is_bond==1" src="https://www.sqkjkj.vip/wxImg/common/collectCoupons/img2.png" mode="aspectFill"
											width="28rpx" height='28rpx'></u-image>
										<view class="u-weight u-font-28 u-m-l-10 u-p-t-10" @click="show=false">
											{{item.shop_info.name}}</view>
									</view>
									<view class="u-font-28 u-p-10 cl_999"><text
											class="cl_FB473CFF">{{item.coupon_list.length}}</text>张优惠券</view>
								</view>
							</view>
							<view class="">
								<view class="" style="text-align: right;">
									<u-icon name="map" size='20'></u-icon>
									<text class="cl_848484FF u-font-24">{{item.distance || 0}}km</text>
								</view>
								<view
									class="bl3A_72 u-text-center cl_FFF u-w-140 u-h-50 u-b-r-24 u-font-24 u-text-center u-l-h-50 u-m-t-20"
									@click="licks(item)">{{item.shop_info.is_like==0?'关注':'已关注'}}</view>
							</view>
						</view>
						<view class=" u-flex-col u-col-center" v-if="item.coupon_list.length==0">
							<u-image src='https://www.sqkjkj.vip/wxImg/1.png' width="100rpx" height='100rpx'></u-image>
							<view class="u-p-b-20 u-font-28 cl_999">暂无可领优惠券</view>
						</view>
						<!-- 商家优惠券 -->
						<scroll-view scroll-x="true" v-else>
							<view class="" style="overflow: auto; width: 750rpx;">
								<view  class="u-flex u-p-l-20">
									<view class=" u-w-411 u-h-180 u-flex u-row-between" :style="{'background':'url(https://www.sqkjkj.vip/wxImg/common/collectCoupons/img.png) no-repeat','background-size': '100% 100%'}"  v-for="(items,index) in item.coupon_list" :key='items.id'>
										<view class="u-t-20 u-w-311 u-p-l-30 cl_FFF">
											<view class="u-font-50 cl_FFF u-weight">{{items.type==3?`${items.discount}折`:items.use_money}}</view>
											<view class="">
												<view class="u-font-22">{{items.type==1?'无门槛':items.type==2?'满减优惠券':items.type==3?'折扣优惠券':'消费券'}} </view>
												<view class="u-font-20 u-p-t-5">{{items.type==1?'无门槛使用':`满${items.limit_money}元可用`}}</view>
											</view>
										</view>
										<view class="u-w-100 u-font-35 u-text-center cl_FF4B3CFF u-weight" @click="save_card(items)">立即领取</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noticeList:[],
				userinfo: '',
				// 点击总的分类
				num: 1,
				// 点击分类时
				asd: 1,
				Text1: '关注',
				text: "全部分类",
				// 筛选数据
				filterList: this.$list.filterList,
				shop_id: '',
				card_id: '',
				// 店铺优惠券
				shop_card: [],
				// 推荐店铺优惠券
				lick_shop_cords: [],
				// 商品泪飙
				good_list: [],
				// 分类列表
				class_name: [],
				// 点击分类下的商品
				class_good_lists:[],
				params:{
					page:1,
					page_size:20,
					active: 1,
					type: '',
					shop_id:'',
					search:''
				},
				// 加载更多参数
				status: 'loadmore',
			}
		},
		onLoad(obj) {
			this.shop_id = obj.num
			this.massage()
			this.clear()
			this.get_goods(1)
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			if(this.good_list.length>=20){
				this.get_goods(this.num)
			}
		},
		onShareAppMessage() {
			return {
				title:this.userinfo.name,
				imageUrl: this.userinfo.bg_img,
				path: `/pages/shopmassage/shopmassage?regcode=${uni.getStorageSync('regcode')}&num=${this.shop_id}`
			}
		},
		onShareTimeline() {
			return {
				title:this.userinfo.name,
				imageUrl:this.userinfo.bg_img,
				path: `/pages/shopmassage/shopmassage?regcode=${uni.getStorageSync('regcode')}&num=${this.shop_id}`
			}
		},
		methods: {
			massage(obj) {
				this.$api.shop_massage({
					shop_id: this.shop_id
				}, res => {
					this.userinfo = res.data.data.shop_info
					if (this.userinfo.is_follow == 0) {
						this.Text1 = '关注'
					} else {
						this.Text1 = '已关注'
					}
				})
				this.notice_list()
			},
			notice_list(){
				this.noticeList=[]
				this.$api.notice_list({
					shop_id: this.shop_id
				}, res => {
					if(res.data.code==1){
						res.data.data.forEach(d=>{
							this.noticeList.push(d.content)
						})
					}
				})
			},
			// 指定商家优惠券
			one_shop() {
				this.$api.one_shop_crd({
					shop_id: this.shop_id
				}, res => {
					// console.log(res);
					this.shop_card = res.data.data.coupon_list

				})
			},
			searchBlur(){
				this.clear()
				console.log('searchBlur',this.num)
				console.log(this.good_list)
				this.get_goods(this.num)
			},
			// 点击分类选择
			choes_card(obj) {
				this.num = obj
				console.log('choes_card',this.num)
				// 普通商品
				if (obj == 1 || obj == 2) {
					this.clear()
					this.get_goods(obj)
				}
				// 点击分类
				if (obj == 3) {
					// 获取分类
					this.class_list()
				}
				// 获取商家优惠券
				if (obj == 4) {
					// 获取指定商家优惠券
					this.one_shop()

					// 获取推荐商家优惠券
					this.lick_shop_cord()
				}
			},
			
			// 点击选择分类
			choes_class(obj){
				this.asd=obj
				this.class_list_good()
			},
			clear(){
				this.params.page = 1
				this.good_list = []
			},
			// 点击获取商品
			get_goods(obj) {
				this.params.type=obj
				this.params.shop_id=this.shop_id
				this.$api.shop_list(this.params, res => {
					if(res.data.code==1){
						if (res.data.data.data.length < 20) {
							this.status = "nomore"
						} else {
							this.params.page = this.params.page + 1
							this.status = "loadmore"
						}
						this.good_list = this.good_list.concat(res.data.data.data)
						uni.stopPullDownRefresh();
					}
				})
			},
			// 分类列表
			class_list() {
				this.$api.shop_class({
					shop_id: this.shop_id
				}, res => {
					this.class_name = res.data.data
					this.asd = this.class_name[0].id
					this.class_list_good()
				})
			},
			class_list_good(){
				this.$api.shop_list({
					active: 1,
					store_cat_id:this.asd,
					shop_id: this.shop_id
				}, res => {
					this.class_good_lists=res.data.data.data
				})
			},
			// 点击关注店铺
			lick() {
				this.$api.lick_shop({
					shop_id: this.shop_id
				}, res => {
					// console.log(res);
					if (res.data.data.is_collect == 0) {
						this.Text1 = '关注'
					} else {
						this.Text1 = '已关注'
					}
				})
			},
			// 关注推荐商家
			licks(obj) {
				this.$api.lick_shop({
					shop_id: obj.shop_info.id
				}, res => {
					obj.shop_info.is_like=obj.shop_info.is_like==1?0:1
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				})
			},
			// 点击领取优惠券
			save_card(obj) {
				this.$api.give_card({
					coupon_id: obj.id
				}, res => {
					if (res.data.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '领取成功'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			},
			// 推荐商家优惠券
			lick_shop_cord() {
				this.$api.one_shop_crd_lick({}, res => {
					this.lick_shop_cords = res.data.data.shop_coupon_list
					for (var i = 0; i < this.lick_shop_cords.length; i++) {
						for (var j = 0; j < this.lick_shop_cords[i].coupon_list.length; j++) {
							this.lick_shop_cords[i].coupon_list[j].limit_money = Math.floor(this.lick_shop_cords[i]
								.coupon_list[j].limit_money)
						}
					}
				})
			},
			// 点击确定
			confirm(e) {
				console.log(e);
				this.text = e[0].label
				this.show = false
			},
			backs() {
				uni.navigateBack()
			},
			choes() {
				this.num = 1
				this.text = 111
			},
			openLocation(){
				this.$com.openLocation(this.userinfo.area+this.userinfo.address,Number(this.userinfo.latitude),Number(this.userinfo.longitude))
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f5f5f5 !important;
	}

	.bag {
		width: 651rpx;
		height: 147rpx;
		background: url('https://www.sqkjkj.vip/wxImg/clear/img8.png') no-repeat;
		background-size: 100% 100%;
	}

	.thr {
		width: 274rpx;
		height: 120rpx;
		background: url('https://www.sqkjkj.vip/wxImg/common/collectCoupons/img.png') no-repeat;
		background-size: 100% 100%;
	}
</style>
